<template>
  <div class="container process-details">
    <!-- 面包屑导航 -->
    <breadcrumb :breadcrumbConfig=breadcrumbConfig></breadcrumb>
    <!--    <breadcrumb></breadcrumb>-->
    <!-- 面包屑导航 -->
    <div class="content page-title">
      <h2>{{pageTitle}}</h2>
    </div>
    <div class="content">

      <template >
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="审批流名称" prop="name">
            <el-input v-model.trim="form.name" maxlength="20" show-word-limit placeholder="请输入内容" size="small"></el-input>
          </el-form-item>
          <el-form-item label="指定功能" prop="funcCodes">
            <el-select v-model="form.funcCodes" placeholder="请选择指定功能" size="small" multiple>
              <el-option :label="item.dictName" :value="item.dictId" v-for="(item, index) in dictionaries.process_func" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适用部门" prop="orgCodeItem">
            <el-cascader v-model="form.orgCodeItem" @change="handleChange"  :options="orgCodeList" :props="{ label: 'orgName', value: 'orgCode',multiple: true,checkStrictly: true}" collapse-tags clearable size="small" placeholder="请选择适用部门"></el-cascader>
            <!--
            <el-select v-model="form.orgCodes" placeholder="请选择适用部门" size="small" multiple>
              <el-option :label="item.dictName" :value="item.dictId" v-for="(item, index) in dictionaries.process_org_list" :key="index"></el-option>
            </el-select>
            -->
          </el-form-item>

          <el-form-item label="审批流设置">
            <el-table border v-loading="loading" :data="form.steps" :span-method="objectSpanMethod" :header-cell-style="headerStyle">
<!--              <el-table-column type="index" align="center" label="审核步骤" width="120"></el-table-column>-->
              <el-table-column prop="sequence" align="center" label="审核步骤" width="120"></el-table-column>
              <el-table-column label="节点标题" prop="title">
                <template slot-scope="props">
                  <el-input v-model.trim="props.row.title" maxlength="8" show-word-limit size="small" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="公司部门" prop="orgCode" width="250">
                <template slot-scope="props">
                  <el-cascader v-model="props.row.orgCode" :show-all-levels="false" :options="orgCodeList"
                               :props="{ label: 'orgName', value: 'orgCode', children: 'children',checkStrictly: true }"
                               size="small" placeholder="请选择适用部门"
                               @change="onChangeOrgCodes(props.row, props.$index)"></el-cascader>
                </template>
              </el-table-column>
              <el-table-column label="角色" prop="roleId">
                <template slot-scope="props">
<!--                  <el-input v-model.trim="props.row.roleId" placeholder="请输入内容"></el-input>-->
                  <el-select v-model="props.row.roleId" placeholder="请选择角色" size="small" @change="onChangeRoleId(props.row, props.$index)">
                    <el-option :label="item.name" :value="item.id" v-for="(item,index) in props.row.roleIdArr" :key="index"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="职员" prop="userId">
                <template slot-scope="props">
                  <el-select v-model="props.row.userId" clearable placeholder="请选择职员" size="small" @change="onChangeUserId(props.row, props.$index)">
                    <el-option :label="item.name" :value="item.id" v-for="(item, index) in props.row.userIdArr" :key="index"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="是否必审" prop="mustFlag" width="120">
                <template slot-scope="props">
                  <el-switch v-model="props.row.mustFlag" :active-value='1' :inactive-value='0' @change="tableMustFlag(props.row,props.$index)"></el-switch>
                </template>
              </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="addParallel(scope.$index, scope.row)">添加并行</el-button>
                    <el-button type="text" @click="upMove(scope.$index, scope.row)">上移</el-button>
                    <el-button type="text" @click="upDown(scope.$index, scope.row)">下移</el-button></template>
                </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-link type="danger" @click="rowDelete(scope.$index, scope.row)">删除</el-link></template>
              </el-table-column>
            </el-table>
            <div class="add-property">
              <el-button type="text" icon="el-icon-plus" @click="addProperty">继续添加步骤</el-button></div>
          </el-form-item>
          <el-form-item label="备注信息" prop="remarks">
            <el-input
                type="textarea"
                :rows="3"
                placeholder="请输入备注信息"
                v-model="form.remarks"
                maxlength="20"
                show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-radio-group v-model="form.status">
              <el-radio :label="item.dictId" v-for="(item,index) in dictionaries.enable_status" :key="index">{{ item.dictName }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否必审">
            <el-radio-group v-model="form.mustFlag">
              <el-radio :label="1">必审</el-radio>
              <el-radio :label="0">非必审</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
<!--        <pre>{{form.steps}}</pre>-->
        <el-button type="primary" @click="verificationForm('form')" class="submit-but">{{ submitText }}</el-button>
      </template>

    </div>
<!--    <pre>{{form.steps}}</pre>-->
    <!--========================== el-dialog =================================-->
    <!--      <el-dialog title="收货地址" :visible.sync="dialogTableVisible">-->
    <!--        <el-table :data="gridData">-->
    <!--          <el-table-column property="date" label="日期" width="150"></el-table-column>-->
    <!--          <el-table-column property="name" label="姓名" width="200"></el-table-column>-->
    <!--          <el-table-column property="address" label="地址"></el-table-column>-->
    <!--        </el-table>-->
    <!--      </el-dialog>-->
    <!--=========================== el-dialog end================================-->
  </div>

</template>

<script>
import breadcrumb from '@/components/breadcrumb'

// import mixinsCommon from './../mixins/common.js'

export default {
  // mixins: [mixinsCommon],
  components: {
    breadcrumb
  },
  data () {
    return {
      loading: false,
      tableData: [], // 全部数据
      dialog: { visible: false, title: '编辑', type: '' },
      breadcrumbConfig: {
        list: [
          {
            title: '审核管理',
            type: '#ff0000',
            path: '/'
          },
          {
            title: '审批流设置',
            type: '1',
            path: ''
          }
        ]
      },
      pageTitle: '添加审批流',
      submitText: '新增',
      form: {
        name: '', // 	审批流名称 	body 	true 	string
        funcCodes: [], // 	指定功能（字典：process_func） 	body 	false 	array
        orgCodes: [], // 	适用部门（数据来源：/sys/v1/common/processOrgList） 	body 	false 	array
        steps: [], // 	审核步骤 	body 	false 	array 	EditStepRequest
        remarks: '', // 	备注信息 	body 	true 	string
        status: '', // 	是否启用（字典：enable_status） 	body 	true 	integer(int32)
        mustFlag: '', // 	是否必审（0否；1是） 	body 	true 	integer(int32)
        orgCodeItem: []
      },
      rules: {
        name: [{ required: true, message: '请输入审批流名称', trigger: 'blur' }],
        funcCodes: [{ required: true, message: '请选择指定功能', trigger: 'change' }],
        orgCodeItem: [{ required: true, message: '请选择适用部门', trigger: 'change' }],
        remarks: [{ required: true, message: '请输入备注信息', trigger: 'blur' }]
      },
      orgCodeList: [],
      processOrgList: [], // 适用部门
      dictionaries: { // 字典数据
        process_func: [], // 属性类型
        enable_status: [], // 状态
        process_org_list: [] // 适用部门
      },
      spanArr: [],
      pos: 0
    }
  },
  created () {
    // this.fetchData()
    // 获取字典数据
    for (const type in this.dictionaries) { this.getDictionaries(type) }
    // submitText
    const id = this.$route.query.id
    if (id) {
      this.$nextTick(_ => {
        this.getProcessDetails(id)
      })
    }
    if (this.$route.query.type === 'edit') {
      this.pageTitle = '编辑审批流'
      this.submitText = '保存'
    }
    this.getOrgTreeList() // 公司部门 列表
  },
  watch: {
    form: {
      handler (val) {
        // console.log(val)
        this.getSpanArr(this.form.steps)
        setTimeout(_ => {
          // console.log(this.form.steps)
        }, 50)
      },
      deep: true
    }
  },
  methods: {
    handleChange (e) {
    },
    // 获取状态字典数据
    getDictionaries (type) {
      if (type && this.dictionaries[type].length > 0) { return }
      const params = { groupId: type }
      this.$api.dictionaries(params).then((res) => {
        this.dictionaries[type] = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    getOrgCodeList () {
      const paramsVersion = { 'request': { 'orgName': '', 'orgType': '' }, 'version': '' }
      this.$api.orgTreeList(paramsVersion).then((res) => {
        this.orgCodeList = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    // 获取详情
    getProcessDetails (id) {
      // debugger
      const params = { id }
      this.$api.processDetails(params).then((res) => {
        if (res.code === 0) {
          res.data.orgCodeItem = []
          res.data.resloveProcessOrgResponseList.map((item) => {
            // console.log(item)
            // res.data.orgCodeItem = item.parentOrgCodeList
            res.data.orgCodeItem.push(item.parentOrgCodeList)
            // item.parentOrgCodeList.forEach((i) => {
            //   console.log(i)
            //   res.data.orgCodeItem.push(i)
            // })
          })
          this.form = res.data
          console.log(this.form.orgCodeItem)
          // const tempOrgCodes = []
          // for (let i = 0; i < res.data.orgCodes.length; i++) {
          //   tempOrgCodes[i] = []
          // }
          // console.log(tempOrgCodes)
          this.form.status = res.data.status.toString()
          const tempSteps = []
          res.data.steps.forEach((item, index) => {
            item.userConfigs.forEach(conItem => {
              const tempObj = {}
              tempObj.mustFlag = item.mustFlag
              tempObj.sequence = item.sequence
              tempObj.title = item.title
              tempObj.orgCode = conItem.orgCode
              tempObj.roleId = conItem.roleId
              tempObj.userId = conItem.userId
              tempObj.mark = item.sequence // 合并行标识 回显示默认值使用 sequence
              tempSteps.push(tempObj)
            })
          })
          // this.mark = tempSteps[this.tempSteps.length - 1].tempSteps.mark + 1
          this.form.steps = tempSteps
          // console.log(this.form.steps)
          this.$nextTick(() => {
            this.form.steps.forEach((item, index) => {
              // 角色 列表
              this.getProcessRoleList(item.orgCode, index)
              // 职员 列表
              this.getProcessUserList(item.orgCode, item.roleId, index)
            })
          })
        } else {
          console.log('goodsPageList - 失败')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 根据条件合并随意行数，因为合并的行数可能是不固定的（传入的data参数为从后台数据数据）
    getSpanArr (data) {
      this.spanArr = []
      this.pos = 0
      // debugger
      // this.form.steps.forEach((item, index) => { item.sequence = index + 1 })
      data.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
        } else {
          if (item.mark === data[index - 1].mark) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.pos = index
            this.spanArr.push(1)
          }
        }
      })
      this.$forceUpdate()
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      // 当前行row
      // 当前列column
      // 当前行号rowIndex
      // 当前列号columnIndex
      // 用于设置要合并的列 0 表示第一列
      // rowIndex表示当前行号，从0开始，合计是第6行
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5 || columnIndex === 6) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        // 该形式为行合并
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    // 合并表头
    headerStyle ({ row, column, rowIndex, columnIndex }) {
      row[6].colSpan = 2
      row[7].colSpan = 0
      if (columnIndex === 7) {
        return { display: 'none' }
      }
    },
    // 编辑属性弹框内新增属性值
    addProperty () {
      const steps = this.form.steps
      console.log(steps)
      const sequence = steps.length === 0 ? 1 : steps[steps.length - 1].sequence + 1
      const mark = steps.length === 0 ? 1 : steps[steps.length - 1].mark * 100
      console.log(mark)
      const obj = {
        title: '', // 节点标题
        orgCode: '', // 选定公司部门 ID
        roleId: '', // 选定角色 ID
        roleIdArr: [], // 角色列表
        userId: '', // 选定 职员 ID
        userIdArr: [], // 职员列表
        mustFlag: 1, // 是否必审 默认 必审
        sequence, // 步骤排序
        mark // 合并行标识
      }
      // console.log(obj)
      this.form.steps.push(obj)// 往数组前面新增
    },
    // 最后一个必选
    tableMustFlag (row, index) {
      // const currentSteps = this.form.steps[index]
      const lastSteps = this.form.steps[this.form.steps.length - 1]
      if (row.title === lastSteps.title && row.sequence === lastSteps.sequence) {
        this.$alert('最后一个节点需要为必审', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            row.mustFlag = 1
          }
        })
      }
    },
    // 添加并行
    addParallel (index, row) {
      const obj = {
        title: row.title,
        orgCode: [],
        roleId: '',
        roleIdArr: [],
        userId: '',
        userIdArr: [],
        mustFlag: row.mustFlag,
        sequence: row.sequence,
        mark: row.mark// 合并行标识
      }
      this.form.steps.push(obj)// 往数组前面新增
      this.form.steps = this.form.steps.sort(function (a, b) { return a.sequence - b.sequence })
    },
    // 属性弹框内表格上移下移
    upMove (index, row) {
      if (index === 0) {
        return this.$message.warning('不能再往上移！')
      } else {
        const steps = [...this.form.steps]
        const currentGroupBefore = []
        const currentGroup = []
        // 将当前需要移动的上一组整理成一个数组，目的为了获取长度，可以知道需要移动的位置
        steps.forEach(item => {
          if (item.mark === steps[index - 1].mark) {
            currentGroupBefore.push(item)
          }
        })
        // 将当前需要移动的数据整理成一个数组，目的为了获取长度和需要移动的数据，可以知道需要移动多少数据并保存
        steps.forEach(item => {
          if (item.mark === steps[index].mark) {
            currentGroup.push(item)
          }
        })
        // 上面步骤已经将需要移动的数据保存，下面这步骤就将需要移动数据删除
        steps.splice(index, currentGroup.length)
        // 插入之前保存数据，效果看起来就相当于移动
        currentGroup.forEach((item, i) => {
          steps.splice(index - currentGroupBefore.length + i, 0, currentGroup[i])
        })
        // 最后一步，整理 审核步骤
        const sorted = this.groupBy(steps, function (item) {
          return [item.mark]
        })
        const tempArr = []
        let tempNum = 1
        sorted.forEach(item => {
          item.forEach(itemm => {
            itemm.sequence = tempNum
            tempArr.push(itemm)
          })
          tempNum++
        })
        // console.log(tempArr)
        // 再住 data 数据 赋值
        this.form.steps = tempArr
      }
    },
    // 下移
    upDown (index, row) {
      const steps = [...this.form.steps]
      const currentGroupAfter = []
      const currentGroup = []
      console.log(index)
      if (index === (steps.length - 1)) {
        this.$message.warning('不能继续往下移动')
      } else {
        // 将当前需要移动的下一组整理成一个数组，目的为了获取长度，可以知道需要移动的位置
        steps.forEach(item => {
          if (item.mark === steps[index + 1].mark) {
            currentGroupAfter.push(item)
          }
        })

        // 将当前需要移动的数据整理成一个数组，目的为了获取长度和需要移动的数据，可以知道需要移动多少数据并保存
        steps.forEach(item => {
          if (item.mark === steps[index].mark) {
            currentGroup.push(item)
          }
        })
        // console.log(index + currentGroup.length, steps.length)
        if (index + currentGroup.length === steps.length) {
          console.log('不能继续往下移动')
          this.$message.warning('不能继续往下移动')
        }
        // 上面步骤已经将需要移动的数据保存，下面这步骤就将需要移动数据删除
        steps.splice(index, currentGroup.length)
        // 插入之前保存数据，效果看起来就相当于移动
        currentGroup.forEach((item, i) => {
          steps.splice(index + 1 + i, 0, currentGroup[i])
        })
        // 最后一步，整理 审核步骤
        const sorted = this.groupBy(steps, function (item) {
          return [item.mark]
        })
        const tempArr = []
        let tempNum = 1
        sorted.forEach(item => {
          item.forEach(itemm => {
            itemm.sequence = tempNum
            tempArr.push(itemm)
          })
          tempNum++
        })
        // console.log(tempArr)
        // 再住 data 数据 赋值
        this.form.steps = tempArr
      }
    },
    groupBy (array, f) {
      // debugger;
      var groups = {}
      array.forEach(function (o) {
        var group = JSON.stringify(f(o))
        groups[group] = groups[group] || []
        groups[group].push(o)
      })
      return Object.keys(groups).map(function (group) {
        return groups[group]
      })
    },
    // 删除
    rowDelete (index) {
      const steps = this.form.steps
      const deleteStep = this.form.steps[index]
      const matchMark = []
      steps.forEach(item => {
        if (item.mark === deleteStep.mark) {
          matchMark.push(item)
        }
      })
      this.form.steps.splice(index, 1)
      this.form.steps.forEach((item, i) => {
        if (item.mark > deleteStep.mark && matchMark.length <= 1) {
          item.sequence = item.sequence - 1
        }
      })
    },
    // 公司部门 列表
    getOrgTreeList () {
      // orgProcessOrgList
      const paramsVersion = { 'request': { 'orgName': '', 'orgType': '' }, 'version': '' }
      this.$api.orgTreeList(paramsVersion).then((res) => {
        this.orgCodeList = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    // 角色 列表
    getProcessRoleList (orgCode, index) {
      this.loading = true
      // this.form.steps[index].roleIdArr = []
      const params = { orgCode, pageNo: 1, pageSize: 1000 }
      this.$api.processRoleList(params).then((res) => {
        this.$set(this.form.steps[index], 'roleIdArr', res.data)
        this.loading = false
      }).catch((err) => {
        console.log(err)
        this.loading = false
      })
    },
    // 选择 公司部门
    onChangeOrgCodes (row, index) {
      const orgCode = typeof (row.orgCode) === 'string' ? row.orgCode : row.orgCode[row.orgCode.length - 1]
      this.getProcessRoleList(orgCode, index) // 获取 角色 列表
      this.form.steps[index].roleId = ''
      this.form.steps[index].userId = ''
      this.form.steps[index].userIdArr = []
    },
    // 选择 角色
    onChangeRoleId (row, index) {
      const orgCode = typeof (row.orgCode) === 'string' ? row.orgCode : row.orgCode[row.orgCode.length - 1]
      // 获取 职员 列表
      this.getProcessUserList(orgCode, row.roleId, index)
      this.form.steps[index].userId = ''
      this.form.steps[index].userIdArr = []
    },
    // 职员 列表
    getProcessUserList (orgCode, roleId, index) {
      this.loading = true
      const params = { orgCode, roleId, pageNo: 1, pageSize: 1000 }
      this.$api.processUserList(params).then((res) => {
        // this.form.steps[index].userIdArr = []
        // this.form.steps[index].userIdArr = res.data
        const list = res.data
        // debugger
        this.$set(this.form.steps[index], 'userIdArr', list)
        // console.log(index, this.form.steps[index].userIdArr)
        this.loading = false
      }).catch((err) => {
        console.log(err)
        this.loading = false
      })
    },
    onChangeUserId (row, index) { // 获取 职员 列表
      console.log(row, index)
      // this.getProcessRoleList(row.orgCode, index)
      // console.log(this.form.steps)
    },
    verificationForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const steps = this.form.steps
          let isAction = true
          steps.forEach((item, index) => {
            if (item.title === '' || item.title === undefined) {
              console.log(item)
              const findTitle = steps.filter( e => {return e.sequence === item.sequence}).find( eFind => {return eFind.title !== '' || eFind.title !== undefined  }).title
              if(findTitle){
                this.form.steps[index].title = findTitle
                console.log(this.form.steps[index].title)
              }else{
                isAction = false
                console.log('请把信息填写完整！')
                return this.$message.warning('请把信息填写完整！')
              }
            }
          })
          steps.forEach(item => {
            if (item.orgCode === '' || item.roleId === '') {
              isAction = false
              console.log('请把信息填写完整！')
              return this.$message.warning('请把信息填写完整！')
            }
          })
          if (isAction) {
            console.log('submit!!')
            this.submit() // 添加 / 编辑 提交 数据
          }
          // this.$emit('formDataval', this.formData)
        } else {
          this.$message.warning('请把信息填写完整！')
          console.log('error submit!!')
          return false
        }
      })
    },
    // 添加 / 编辑 提交 数据
    submit () {
      const params = Object.assign({}, this.form)
      params.orgCodes = []
      this.form.orgCodeItem.forEach(item => {
        console.log(item, 'item')
        params.orgCodes.push(item.length > 0 ? item[item.length - 1] : item)
      })
      const tempStepsArr = []
      let tempObj = { userConfigs: [] }
      // debugger
      params.steps.forEach((item, index) => {
        const tempObjB = { orgCode: '', roleId: '', userId: '' }
        if (index === 0) { // 第一条数据不用判断直接加
          tempObj.title = item.title
          tempObj.mustFlag = Number(item.mustFlag)
          tempObj.sequence = item.sequence
          // tempObjB.orgCode = item.orgCode.length > 0 ? item.orgCode[item.orgCode.length - 1] : item.orgCode
          tempObjB.orgCode = typeof (item.orgCode) === 'string' ? item.orgCode : item.orgCode[item.orgCode.length - 1]
          tempObjB.roleId = item.roleId
          tempObjB.userId = item.userId
          tempObj.userConfigs.push(tempObjB)
          tempStepsArr.push(tempObj)
        } else {
          if (item.title === tempStepsArr[tempStepsArr.length - 1].title || item.sequence === tempStepsArr[tempStepsArr.length - 1].sequence) { // 第二条数据判断名称是否相等如果相等就合并
            tempObjB.orgCode = typeof (item.orgCode) === 'string' ? item.orgCode : item.orgCode[item.orgCode.length - 1]
            tempObjB.roleId = item.roleId
            tempObjB.userId = item.userId
            tempStepsArr[tempStepsArr.length - 1].userConfigs.push(tempObjB)
          } else { // 如果标题不相等就新增多一条数据
            tempObj.title = item.title
            tempObj.mustFlag = Number(item.mustFlag)
            tempObj.sequence = item.sequence
            tempObjB.orgCode = typeof (item.orgCode) === 'string' ? item.orgCode : item.orgCode[item.orgCode.length - 1]
            tempObjB.roleId = item.roleId
            tempObjB.userId = item.userId
            tempObj.userConfigs.push(tempObjB)
            tempStepsArr.push(tempObj)
          }
        }
        tempObj = { userConfigs: [] }
        // console.log(tempStepsArr)
      })
      params.steps = tempStepsArr
      console.log('添加 / 编辑 提交 数据', params)
      let actionFun = this.$api.processAdd
      // console.log(typeof this.$route.query.type, this.$route.query.type)
      if (this.$route.query.type === 'edit') { actionFun = this.$api.processEdit }
      actionFun(params).then((res) => {
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '提交 数据 成功 ！',
            type: 'success'
          })
          this.$router.push({ name: 'examinationProcess', query: { refresh: 1 }}) // refresh 为 1 表示 刷新
        } else {
          console.log('goodsPageList - 失败')
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-button {border: none;}
/deep/ .el-form-item__label, /deep/.el-table--border .el-table__cell .cell{
  color: #333333;
  font-weight: 400;
  font-size: 14px;
}
.page-title{
  margin-bottom: 0!important;
  h2{
    border-bottom: 2px solid #d1d1d1!important;
  }
}
.process-details{
  .content{
    .el-form{
      .el-form-item{
        &:nth-child(6){
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
